<template>
  <div class="app-container">
    <div class="receiTop">
      <div class="ydh">运单号：</div>
      <el-input v-model="ydh" placeholder="运单号" clearable/>
    </div>
    <el-row style="margin: 10px 0">
      <el-col :span="3">
        <span class="erpLabel">已收货：</span>
        <span style="font-size: 24px;color: #004BCB">10</span>
      </el-col>
      <el-col :span="3">
        <span class="erpLabel">已质检：</span>
        <span style="font-size: 24px;color: #B8741A">10</span>
      </el-col>
      <el-col :span="4">
        <span class="erpLabel">已打印商品标签：</span>
        <span style="font-size: 24px;color:#027DB4">10</span>
      </el-col>
    </el-row>
    <vxe-table
        border
        show-overflow
        style="margin-top: 20px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="name" width="180" title="采购单号/退货单号"></vxe-column>
      <vxe-column field="name" width="100" title="订单类型"></vxe-column>
      <vxe-column field="name" width="140" title="SKU编码"></vxe-column>
      <vxe-column field="name" width="220" title="商品名称"></vxe-column>
      <vxe-column field="name" width="140" title="商品图片"></vxe-column>
      <vxe-column field="name" width="80" title="应收数量"></vxe-column>
      <vxe-column field="name" width="80" title="收货数量"></vxe-column>
      <vxe-column field="name" width="140" title="质检正品数量"></vxe-column>
      <vxe-column field="name" width="140" title="打印标签数量"></vxe-column>
      <vxe-column field="name" width="100" title="配送方式"></vxe-column>
      <vxe-column field="name" width="140" title="运单号"></vxe-column>
      <vxe-column field="name" width="120" title="供应商"></vxe-column>
      <vxe-column fixed="right" width="80" title="操作">
        <template #default="scope">
          <el-button type="text" style="color:green" @click="chickDetail">查看</el-button>
        </template>
      </vxe-column>

    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup>

import {nextTick, ref} from "vue";

let ydh = ref("")
let tableList =ref([])
let total=ref(0)

let queryParams=ref({
  pageNum:1,
  pageSize:20
})
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 450;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 450;
}
function getList(){

}
</script>

<style scoped lang="scss">
.ydh {
  font-size: 30px;
  font-weight: bold;
  width: 150px;
}

.receiTop{
  display: flex;justify-content: center;align-items: center;
  :deep(.el-input__inner){
    font-size: 24px;
    height: 100px !important;
  }
}

.erpLabel {
  font-size: 24px;
  font-weight: bold;
}

</style>